<template>
  <a-modal title='打印预览' :visible='visible' width='1300px' @cancel='handleClose'>
    <section ref="print" id="saleOrderPrint">
      <div style='text-align: center'>
        <h1 class='printTitle'>江苏晶鑫新材股份有限公司</h1>
      </div>
      <div style='text-align: center'>
        <h1 class='printTitle2'>发货单</h1>
      </div>
      <a-row type='flex' justify="center" class="form-row" :gutter="24">
        <a-col :span="8">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户：" :colon="false" class='printId'>
            <a-input v-decorator="['id']" hidden/>
            {{model.organName}}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期：" :colon="false" class='printId'>
            {{model.operTime}}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号：" :colon="false" class='printId'>
            {{model.number}}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type='flex' justify="center" class="form-row" :gutter="24">
        <a-col :span="6">
          <a-form-item :labelCol="labelColEx" :wrapperCol="wrapperColEx" label="销售人员：" :colon="false" class='printId'>
            {{model.salesManStr}}
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :labelCol="labelColEx" :wrapperCol="wrapperColEx" label="运输方式：" :colon="false" class='printId'>
            {{model.traffic}}
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :labelCol="labelColEx" :wrapperCol="wrapperColEx" label="承运人：" :colon="false" class='printId'>
            {{model.transfer}}
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注：" :colon="false" class='printId'>
            {{model.remark}}
          </a-form-item>
        </a-col>
      </a-row>
      <div :style="tableWidth">
        <a-table
          ref="table"
          size="middle"
          rowKey="id"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          >
        </a-table>
      </div>
      <a-row class="form-row" :gutter="24">
<!--        <a-col :lg="24" :md="24" :sm="24">-->
<!--          <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">-->
<!--            {{model.remark}}-->
<!--          </a-form-item>-->
<!--        </a-col>-->
      </a-row>
      <a-row class="form-row" :gutter="24">
        <a-col :span="8">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="制单人：" :colon="false" class='printId'>
            {{model.creatorName}}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="审核人：" :colon="false" class='printId'>
            {{model.sp}}
          </a-form-item>
        </a-col>
      </a-row>
    </section>
    <template slot="footer">
      <a-button key="print" v-print="'#saleOrderPrint'">
        打印
      </a-button>
    </template>
  </a-modal>
</template>
<script>

export default {
  name: "SaleOrderPrint",
  props: {
    dataSource: [],
    model: {}
  },
  data() {
    return {
      visible: false,
      columns: [
        { title: '商品编码', dataIndex: 'barCode', className: 'tee'},
        { title: '仓库', dataIndex: 'depotName', className: 'tee'},
        { title: '名称', dataIndex: 'name', className: 'tee'},
        { title: '规格', dataIndex: 'standard', className: 'tee'},
        { title: '单位', dataIndex: 'unit', className: 'tee'},
        { title: '数量', dataIndex: 'operNumber', className: 'tee'},
        // { title: '备注', dataIndex: 'remark', className: 'tee'}
      ],
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 19 },
        sm: { span: 19 },
      },
      labelColEx: {
        xs: { span: 7 },
        sm: { span: 7},
      },
      wrapperColEx: {
        xs: { span: 17 },
        sm: { span: 17 },
      },
      tableWidth: {
        'width': '1200px'
      },
      tableWidthRetail: {
        'width': '1150px'
      },
    }
  },
  methods:{
    handleClose() {
      this.visible=false
    }
  },
  watch: {
    model: function(newVal, oldVal) {
      this.model.operTime = this.model.operTime.split("T")[0]
      if (this.model.traffic !== undefined) {
        if (this.model.traffic === 'ship') {
          this.model.traffic = '轮船'
        } else if (this.model.traffic === 'car') {
          this.model.traffic = '汽车'
        } else if (this.model.traffic === 'train') {
          this.model.traffic = '火车'
        } else {
          this.model.traffic = '自提'
        }
      }
    }
  }
}
</script>

<style lang='less' scoped>
.printTitle{
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-size: 25px;
  font-weight:bolder;
}
.printTitle2{
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-size: 20px;
  font-weight:bolder;
}
.printId{
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-weight:bold;
  font-size: 16px;
  //font-size: 50px;
}
::v-deep .ant-table {
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-size: 16px;
  font-weight:bolder;
}
::v-deep .ant-form-item-label label{
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-size: 16px;
  font-weight:bolder;
}
::v-deep .ant-table-column-title {
  font-family: Microsoft YaHei !important;
  color: #000 !important;
  font-size: 18px;
  font-weight:bolder;
}
::v-deep .ant-table-body {
  border: 1px solid #000 !important;
}
::v-deep .ant-table-thead  tr{
  border: 1px solid #000 !important;
}
::v-deep .ant-table-tbody tr{
  border: 1px solid #000 !important;
}
::v-deep .ant-table-row td{
  border: 1px solid #000 !important;
}
::v-deep th.tee{
  border: 1px solid #000 !important;
}
::v-deep .ant-form-item-label {
  //display: inline-block;
  //overflow: hidden;
  line-height: 39.9999px;
  //white-space: nowrap;
  text-align: right;
  //vertical-align: middle;
}
</style>